import { Button, Tabs, Space, Dropdown, Menu, Input, Select } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState } from 'react';
import { PlusOutlined, DownOutlined, SettingOutlined } from '@ant-design/icons'
import ApiContext from './ApiContext'
import ApiErrorCode from './ApiErrorCode'
import ApiDataModel from './ApiDataModel'
import ApiStatusCode from './ApiStatusCode'

import ActionDropdown from '@/components/ActionDropdown'
const { TabPane } = Tabs;
const { Option } = Select;


const ProjectApi = (props) => {

    const {
        projectId,
        projectPermission,
        routeParam,
    } = props;

    const [apiProjectData, setApiProjectData] = useState({
        rootPath: "/api",
        name: "用户项目",
        envConfigs: [],
    })

    const [activeKey, setActiveKey] = useState("api");
    const [apiId, setApiId] = useState()


    useEffect(() => {
        // console.log(routeParam)
        if (routeParam.itemId === "model" || routeParam.itemId === "statusCode" || routeParam.itemId === "errorCode") {
            setActiveKey(routeParam.itemId)
        } else {
            setActiveKey("api")
            if (routeParam.itemId) {
                setApiId(routeParam.itemId)
            }
        }
    }, [routeParam])

    const addApiMenu = (
        <Menu >
            <Menu.Item key="import" >
                导入
          </Menu.Item>
            <Menu.Item key="export" >
                导出到
          </Menu.Item>
        </Menu>
    );


    return (<div className={styles.docBody}>
        <Tabs
            className={styles.apiProject}
            tabBarExtraContent={{
                left: (<div className={styles.leftHeader}>
                    <div className={styles.projectName}>
                        <div>{apiProjectData?.name || "接口列表"}</div>
                        <div className={styles.rootPath}>{apiProjectData?.rootPath}</div>
                    </div>
                    <Dropdown.Button className={styles.addApiMenu} overlay={addApiMenu} placement="bottomCenter" type="primary" icon={<DownOutlined />}>
                        <PlusOutlined />新增接口
                        </Dropdown.Button>
                </div>),
                right: (<Space className={styles.headerExtra} align="center" size={16}>
                    <Select defaultValue="lucy" style={{ width: 120 }} suffixIcon={<SettingOutlined />}>
                        <Option value="jack">线上环境</Option>
                        <Option value="lucy">测试环境</Option>
                    </Select>
                    <ActionDropdown actions={[]} />
                </Space>)
            }}
            onChange={(key) => {
                if (key === 'api') {
                    if (apiId) {
                        history.push(`/projects/${projectId}/api/${apiId}`)
                    } else {
                        history.push(`/projects/${projectId}/api`)
                    }
                } else {

                    history.push(`/projects/${projectId}/api/${key}`)
                }
            }}
            activeKey={activeKey}
            defaultActiveKey="api">
            <TabPane key="api" tab="接口">
                <ApiContext {...props} apiId={apiId} />
            </TabPane>
            <TabPane key="model" tab="数据模型">
                <ApiDataModel {...props} />
            </TabPane>
            <TabPane key="statusCode" tab="状态码">
                <ApiStatusCode {...props} />
            </TabPane>
            <TabPane key="errorCode" tab="错误码">
                <ApiErrorCode {...props} />
            </TabPane>
        </Tabs>
    </div >)
}



export default ProjectApi